<template>
  <div v-loading="loading">

    <div class="all-box">

      <div class="all-box-left">

        <el-card v-if="!loading" :class="{'left-box':true, 'left-box-normal': !scrolled, 'left-box-scrolled': scrolled}" style="width: 250px">

          <div v-for="item in postForm.groupList" :key="item.id" class="group-card">
            <div v-if="(onlySubj && (item.quType==='saq' || item.quType==='mix')) || !onlySubj">
              <div style="line-height: 40px">
                <el-button style="font-size: 14px; font-weight: 700" type="text" @click="goAnchor(item.id)">{{ item.title }}</el-button>
                <el-divider />
              </div>
              <div class="group-card-body">
                <div>
                  共 <i class="num">{{ item.quCount }}</i> 题，共 <i class="num">{{ item.totalScore }}</i> 分
                </div>
              </div>

              <div class="card-box">
                <div v-for="card in item.quList" :key="card.id" class="item" @click="goAnchor(card.id)">
                  <div :class="{num:true, right: card.isRight, error: !card.isRight, 'current': postForm.state===1 && card.quType==='saq'}">{{ card.sort }}</div>
                </div>
              </div>

            </div>

          </div>

        </el-card>

      </div>

      <div class="all-box-center">

        <template v-for="item in postForm.groupList">

          <el-card v-if="(onlySubj && (item.quType==='saq' || item.quType==='mix')) || !onlySubj" :id="item.id" :key="item.id" class="content-card">

            <template v-for="(qu,index) in item.quList">
              <div v-if="!onlyError || (onlyError && !qu.isRight)" :key="qu.id">
                <div :id="qu.id" class="list-box">
                  <div class="list-qu">
                    <qu-item-show :value="qu" :index="index" :review-state="postForm.reviewState" />

                    <div v-if="qu.quType === 'mix'">

                      <!-- 子题目的判卷 -->
                      <div v-for="(sub,jj) in qu.subList" :key="sub.id" class="list-sub-box">
                        <div class="list-sub-qu">
                          <qu-item-show :value="sub" :index="jj" :review-state="postForm.reviewState" :show-type="true" :sub="true" />
                        </div>

                        <div class="list-sub-opt">
                          <div class="check-box" style="line-height: 26px">
                            <div class="item">本题总分：<span style="color: #1aac1a">{{ sub.score }}</span></div>
                            <div class="item">学员得分：<span style="color: #ff3333">{{ sub.actualScore }}</span></div>
                          </div>
                        </div>

                      </div>

                    </div>
                  </div>

                  <!-- 组合题不需要大题判卷 -->
                  <div v-if="qu.quType!=='mix'" class="list-opt">

                    <div class="check-box" style="line-height: 26px">
                      <div class="item">本题总分：<span style="color: #1aac1a">{{ qu.score }}</span></div>
                      <div class="item">学员得分：<span style="color: #ff3333">{{ qu.actualScore }}</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </template>

          </el-card>

        </template>

      </div>

      <div class="all-box-right">

        <el-card v-if="!loading" :class="{'left-box':true, 'left-box-normal': !scrolled, 'left-box-scrolled': scrolled}" style="width: 200px">
          <div>人员姓名</div>
          <div style="color: #0a84ff">{{ postForm.userId_dictText }}</div>
          <el-divider />
          <div>考试成绩</div>
          <div style="color: #FF4B50">{{ postForm.userScore }}</div>
          <el-divider />
          <div>考试状态</div>
          <div>
            <span v-if="postForm.userScore >= postForm.qualifyScore" style="color: #03DD6D">通过</span>
            <span v-else style="color: #FF4B50">未通过</span>
          </div>
        </el-card>
      </div>

    </div>

  </div>
</template>

<script>

import { paperResult } from '@/api/paper/exam'
import { reviewPaper } from '@/api/paper/paper'
import { scrollTo } from '@/utils/scroll-to'
import QuItemShow from '@/views/admin/repo/qu/components/QuItemShow'

export default {
  components: { QuItemShow },
  data() {
    return {
      onlyError: false,
      // 只显示主观题
      onlySubj: false,
      scrolled: false,
      // 试卷ID
      paperId: '',
      postForm: {
      },
      hiddenQu: true,
      loading: false
    }
  },

  watch: {

    // 重新计算分数
    'postForm.groupList': {
      handler(val) {
        let userScore = 0
        for (let i = 0; i < val.length; i++) {
          const item = val[i]

          let groupScore = 0
          const quList = item.quList
          for (let j = 0; j < quList.length; j++) {
            const qu = quList[j]
            // 组合题增加组合分数
            if (qu.quType === 'mix') {
              const subList = qu.subList
              for (let k = 0; k < subList.length; k++) {
                groupScore = this.$calc.add(subList[k].actualScore, groupScore)
              }
            } else {
              groupScore = this.$calc.add(qu.actualScore, groupScore)
            }
          }

          item.userScore = this.$calc.add(item.userScore, groupScore)
          userScore = this.$calc.add(groupScore, userScore)
        }

        this.postForm.userScore = userScore
      },
      deep: true
    }

  },

  mounted() {
    // 监听滚动条
    window.addEventListener('scroll', () => {
      let scrollTop = 0
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
        scrollTop = document.body.scrollTop
      }

      if (scrollTop > 85) {
        this.scrolled = true
      } else {
        this.scrolled = false
      }
    })
  },
  created() {
    const id = this.$route.query.paperId
    if (id !== undefined) {
      this.paperId = id
      this.fetchData(id)
    }
  },

  methods: {

    // 手动判断正确错误
    checkAnswer(qu, isRight) {
      if (isRight) {
        qu.actualScore = qu.score
      } else {
        qu.actualScore = 0
      }

      qu.isRight = isRight
    },

    // 到指定位置
    goAnchor(selector) {
      const anchor = document.getElementById(selector)
      const to = anchor.offsetTop + 80
      scrollTo(to, 600, function() {
        console.log('滑动到指定位置！')
      })
    },

    // 判断是否回答
    userAnswer(answerList) {
      let answer = ''

      for (let i = 0; i < answerList.length; i++) {
        if (answerList[i].checked) {
          answer += answerList[i].abc
        }
      }

      if (!answer) {
        answer = '未作答'
      }

      return answer
    },

    // 获取试卷内容
    fetchData(id) {
      const params = { id: id }
      this.loading = true
      paperResult(params).then(response => {
        // 试卷内容
        this.postForm = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    handlerShow() {
      this.hiddenQu = !this.hiddenQu
    },

    submitForm() {
      this.loading = true

      reviewPaper(this.postForm).then(() => {
        this.$notify({
          title: '成功',
          message: '阅卷成功！',
          type: 'success',
          duration: 2000
        })

        this.$router.push({ name: 'ReviewPaper', params: { examId: this.postForm.examId }})
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

  .all-box{
    display: flex;
    flex-direction: row
  }

  .all-box-left{
    width: 250px;
    flex: 0 0 250px
  }

  .all-box-center{
    flex-grow: 1;
    padding-left: 20px;
    padding-right: 20px;
    width: 50vw;
  }

  .all-box-right{

    width: 200px;
    flex: 0 0 200px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    font-weight: 700;
  }

  .group-card{
    margin-bottom: 15px;
    line-height: 28px;
    width: 100%;
  }

  .group-card-body {
    line-height: 22px;
    font-size: 14px;
  }

  .group-card .num{
    color: #1890FF;
  }

  .left-box{
    height: calc(100vh - 120px);
    position: fixed;
    overflow: auto;
    clear: both;
  }

  .left-box-normal{
    top: 103px;
  }

  .left-box-scrolled{
    top: 20px;
    height: calc(100vh - 40px);
  }

  .content-card{
    margin-bottom: 20px;
    line-height: 28px;
  }

  .check-box{
    background: #f5f5f5;
    padding: 20px;
    line-height: 40px;
    width: 200px;
    font-size: 14px;
    font-weight: 700;
  }

  .check-box .item{
    display: flex;
    flex-direction: row;
    align-items: center
  }

  .check-icon{
    font-size: 28px;
    color:#ddd;
    cursor: pointer;
    margin-right: 10px;
  }

  .check-icon-right{
    color: #03DD6D;
  }

  .check-icon-error{
    color: #FF4B50;
  }

  ::v-deep .el-divider--horizontal{
    margin: 5px 0;
  }

  .link-item{
    background: #f5f5f5; margin-bottom: 10px; padding: 10px; border-radius: 10px
  }

</style>

